<template>
  <div class="ranking-anime-module">
    <div v-if="loading" class="loading">
      <p>加载中...</p>
    </div>
    
    <div v-else-if="animes.length === 0" class="no-results">
      <p>暂无排名数据</p>
    </div>
    
    <div v-else class="rankings-container">
      <!-- 排名前三的动漫 -->
      <div v-for="(anime, index) in topThreeAnimes" :key="anime.id" class="ranking-item rank-item">
        <div :class="['rank-number', `rank-${index + 1}`]">{{ index + 1 }}</div>
        <AnimeCard
          :anime="anime"
          :is-featured="true"
          :class="`rank-${index + 1}`"
          :show-rank="true"
          :rank="index + 1"
          @vote="handleVote"
          @favorite="handleFavorite"
          @click="showAnimeDetail"
        />
      </div>

      <!-- 排名第四及以后的动漫 -->
      <div v-for="(anime, index) in regularAnimes" :key="anime.id" class="ranking-item regular-item rank-item">
        <div class="rank-number regular-rank">{{ index + 4 }}</div>
        <AnimeCard
          :anime="anime"
          :is-featured="false"
          :show-rank="true"
          :rank="index + 4"
          @vote="handleVote"
          @favorite="handleFavorite"
          @click="showAnimeDetail"
        />
      </div>

      <!-- 加载更多提示 -->
      <div v-if="loadingMore" class="loading-more">
        <div class="skeleton" style="width: 100%; height: 200px;"></div>
      </div>

      <!-- 没有更多数据提示 -->
      <div v-if="!hasMoreData && animes.length > 0" class="no-more-data">
        <p>没有更多数据了</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import AnimeCard from './AnimeCard.vue'
import type { Anime } from '../types/anime'

// 定义组件的属性
const props = withDefaults(defineProps<{
  animes: Anime[]
  loading?: boolean
  loadingMore?: boolean
  hasMoreData?: boolean
}>(), {
  loading: false,
  loadingMore: false,
  hasMoreData: true
})

// 定义组件的事件
const emit = defineEmits<{
  vote: [animeId: number]
  favorite: [eventData: number | { animeId: number, isFavorited: boolean }]
  'show-detail': [anime: Anime]
}>()

// 计算属性
const topThreeAnimes = computed(() => props.animes.slice(0, 3))
const regularAnimes = computed(() => props.animes.slice(3))

// 处理投票
const handleVote = (eventData: number | { animeId: number }) => {
  // 确保传递number类型的animeId
  const animeId = typeof eventData === 'number' ? eventData : eventData.animeId;
  emit('vote', animeId);
}

// 处理收藏
const handleFavorite = (eventData: number | { animeId: number, isFavorited: boolean }) => {
  // 向上传递完整的事件数据，包括isFavorited状态（如果有）
  // 这样父组件可以直接使用isFavorited状态，不需要额外的API调用
  emit('favorite', eventData);
}

// 显示动漫详情
const showAnimeDetail = (anime: Anime) => {
  emit('show-detail', anime)
}
</script>

<style scoped>
.ranking-anime-module {
  width: 100%;
}

.loading,
.no-results,
.no-more-data {
  text-align: center;
  padding: 40px 0;
  color: #666;
}

.rankings-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.3s ease;
}

.ranking-item:hover {
  transform: translateX(4px);
}

.rank-number {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  border-radius: 50%;
  flex-shrink: 0;
}

.rank-1 {
  background-color: #FFD700;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.5);
}

.rank-2 {
  background-color: #C0C0C0;
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.5);
}

.rank-3 {
  background-color: #CD7F32;
  box-shadow: 0 4px 12px rgba(205, 127, 50, 0.5);
}

.regular-rank {
  background-color: #FF69B4;
  box-shadow: 0 2px 8px rgba(255, 105, 180, 0.3);
  font-size: 1.25rem;
}

.loading-more {
  padding: 20px 0;
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 8px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* 响应式设计 */
@media (max-width: 768px) {
  .rankings-container {
    gap: 16px;
  }
  
  .ranking-item {
    gap: 12px;
  }
  
  .rank-number {
    width: 32px;
    height: 32px;
    font-size: 1.25rem;
  }
  
  .regular-rank {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .rankings-container {
    gap: 12px;
  }
  
  .ranking-item {
    gap: 8px;
    flex-direction: column;
    align-items: flex-start;
  }
  
  .rank-number {
    width: 28px;
    height: 28px;
    font-size: 1.125rem;
    position: absolute;
    top: 8px;
    right: 8px;
  }
  
  .regular-rank {
    font-size: 1rem;
  }
}
</style>